<template>
  <PageContainer title="直播房间管理">
    <template v-slot:extra>
      <el-input v-model="roomNumber" style="width: 300px;white-space: nowrap;" size="large" placeholder="请输入要查询的房间号" />
      <el-button size="large" style="margin-left: 10px;" type="primary" @click="getById">查询</el-button>
      <el-button size="large" style="margin-left: 10px;" type="primary" @click="onset">重置</el-button>
      <!-- 添加直播间 -->
      <AddLiveRoom></AddLiveRoom>
    </template>
    <div class="mid">
      <div class="live" v-for="item in liveRoomList" :v-model="liveRoomList">
        <div class="left">
          <img v-if="item.url" :src="item.url" @click="imgShow(item)">
          <div v-else>暂无封面</div>
        </div>
        <div class="right">
          <div class="big-title">
            <div class="title">{{ item.roomNumber }}</div>
            <div class="status">
              <el-tag v-if="item.status === 0" size="small" type="success">正常</el-tag>
              <el-tag v-else size="small" type="danger">禁播</el-tag>
              <el-tag v-if="item.broadcastFlag === 0" size="small" type="success">进行中</el-tag>
              <el-tag v-else size="small" type="danger">未开播</el-tag>
            </div>
          </div>
          <div class="data">
            <div class="partner">主播id:&nbsp;{{ item.anchorId }}</div>
            <div class="liveRoom_tag" @click="tagsShow(item)">查看标签<el-icon style="margin-top: 5px">
                <ArrowRight />
              </el-icon></div>
            <div class="notice" @click="noticeShow(item)">查看公告<el-icon style="margin-top: 5px">
                <ArrowRight />
              </el-icon></div>
            <div class="room" @click="infoShow(item)">房间简介<el-icon style="margin-top: 5px">
                <ArrowRight />
              </el-icon></div>
          </div>
          <div class="operation">
            <div class="live_status">
              <el-button class="my-button" type="danger" @click="banById(item)">封禁</el-button>
              <el-button class="my-button" type="primary" @click="liftBanById(item)">解禁</el-button>
            </div>
            <div class="delete" style="font-size: 30px">
              <!-- 编辑直播间信息 -->
              <updateLiveRoom :roomMsg="item"></updateLiveRoom>
              <el-icon size="30px">
                <DeleteFilled @click="deleteById(item)" />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>

    <template #empty>
      <el-empty description="没有数据"></el-empty>
    </template>

    <div class="page">
      <el-pagination :page-sizes="[2, 4, 6, 8]" layout="total, sizes, prev, pager, next,jumper" :total="total"
        v-model:current-page="params.pageNum" v-model:page-size="params.pageSize" @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle" />
    </div>

    <el-dialog v-model="imgVisible" width="50%">
      <img :src="imgUrl" style="width: 100%;height: 100%;">
    </el-dialog>

    <el-dialog v-model="infoVisible" width="50%">
      {{ infoIn }}
    </el-dialog>

    <el-dialog v-model="noticeVisible" width="50%">
      {{ noticeIn }}
    </el-dialog>

    <el-dialog v-model="tagsVisible" width="50%">
      {{ tagsIn }}
    </el-dialog>

    <el-dialog v-model="visible" width="50%">
      <h1>未找到直播间！！！！！！！</h1>
    </el-dialog>
  </PageContainer>
</template>

<script setup lang="ts">
import { getLiveRoom, getLiveRoomByLiveRoomId, banLiveRoom, liftBanLiveRoom, deleteLiveRoom } from '../../../service/api'
import { ArrowRight, DeleteFilled } from '@element-plus/icons-vue'
import PageContainer from '@/components/PageContainer.vue';
import AddLiveRoom from './components/addLiveRoom.vue'
import updateLiveRoom from './components/updateLiveRoom.vue';
import { ref, provide } from 'vue'


const roomNumber = ref('')
const imgVisible = ref(false)
const infoVisible = ref(false)
const infoIn = ref("")
const noticeVisible = ref(false)
const noticeIn = ref("")
const tagsVisible = ref(false)
const tagsIn = ref("")
const total = ref(1)
const imgUrl = ref("")
const visible = ref(false)

const liveRoomList = ref<any>([])
const params = ref({
  pageNum: 1,
  pageSize: 4,
})
// 获取直播间列表
const getLiveRoomList = async () => {
  const res = await getLiveRoom(params.value)
  liveRoomList.value = res.data.data.list
  total.value = res.data.data.total
  console.log(res.data);
}
getLiveRoomList()
provide('getLiveRoomList', getLiveRoomList)
//根据房间号搜索直播间
const getById = async () => {
  const res = await getLiveRoomByLiveRoomId({
    roomNumber: roomNumber.value
  })
  if (roomNumber.value !== '') {
    const liveRoom = res.data.data
    console.log(liveRoom);
    if (liveRoom) {
      liveRoomList.value = [liveRoom]
      params.value.pageNum = 1
    } else {
      visible.value = true;
      liveRoomList.value = []
    }
  } else {
    ElMessage.error('请输入房间号！！！')
  }
}

//重置
const onset = () => {
  params.value.pageNum = 1 //重置页面
  roomNumber.value = ''
  getLiveRoomList()
}

const imgShow = (row: any) => {
  imgVisible.value = true;
  imgUrl.value = row.url
}

const infoShow = (row: any) => {
  infoVisible.value = true;
  infoIn.value = row.info
}

const noticeShow = (row: any) => {
  noticeVisible.value = true;
  noticeIn.value = row.notice
}

const tagsShow = (row: any) => {
  tagsVisible.value = true;
  tagsIn.value = row.tags
}
//分页，每页条数
const pageSizeChangeHandle = (val: number) => {
  params.value.pageSize = val;
  params.value.pageNum = 1;
  getLiveRoomList();
}
//分页，当前页
const pageCurrentChangeHandle = (val: number) => {
  params.value.pageNum = val;
  getLiveRoomList();
}

// 封禁直播间
const banById = async (row: any) => {
  await banLiveRoom({
    liveRoomId: row.id
  })
  getLiveRoomList()
}

// 解禁直播间
const liftBanById = async (row: any) => {
  await liftBanLiveRoom({
    liveRoomId: row.id
  })
  getLiveRoomList()
}

//注销直播间
const deleteById = async (row: any) => {
  await ElMessageBox.confirm('是否删除直播间信息', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await deleteLiveRoom({
    liveRoomId: row.id
  })
  ElMessage.success('删除成功')
  getLiveRoomList()
}
</script>


<style scoped lang="less">
@import 'liveRoom.less';
</style>